<template>
  <div class="signin">
    <img src="@/assets/signin/welcome.svg" alt="sign in image" class="signin-img" />
    <el-form
      ref="signinFormEle"
      size="large"
      class="signin-form"
      :model="signinForm"
      :rules="signinFormRules"
      @submit.prevent="handleSignin"
    >
      <!-- <h1>登录</h1> -->
      <h5>
        <span style="margin-right: auto">账号</span>
        <el-link type="primary" :underline="false" @click="handleSignup">注册账号</el-link>
      </h5>
      <el-form-item prop="username">
        <el-input v-model="signinForm.username" placeholder="输入账号"></el-input>
      </el-form-item>
      <h5>
        <span style="margin-right: auto">密码</span>
        <el-link type="primary" :underline="false" @click="handleResetPassword">重置密码</el-link>
      </h5>
      <el-form-item prop="password">
        <el-input v-model="signinForm.password" placeholder="输入密码"></el-input>
      </el-form-item>
      <h5>验证码</h5>
      <el-form-item prop="captcha">
        <div class="signin-form-captcha">
          <img :src="captchaSrc" alt="captcha" @click="handleGetCaptcha" />
          <el-input v-model="signinForm.captcha" placeholder="输入验证码"></el-input>
        </div>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" style="width: 100%" native-type="submit" :loading="isSigningIn">登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script setup lang="ts">
import { getCaptchaImg, signin } from '@/api/auth'
import { useRouter, useRoute } from 'vue-router'
import store from '@/store'
import { onMounted, ref } from '@vue/runtime-core'
import { ElMessage } from 'element-plus'
// import { ElForm } from 'element-plus'

const router = useRouter()

// 1. 渲染表单
const signinForm = ref({
  username: 'zce',
  password: 'wanglei',
  captcha: '',
})

const signinFormRules = ref({
  username: [
    {
      required: true,
      message: 'Please input username',
      trigger: 'change',
    },
  ],
  password: [
    {
      required: true,
      message: 'Please input password',
      trigger: 'change',
    },
  ],
  captcha: [
    {
      required: true,
      message: 'Please input captcha',
      trigger: 'change',
    },
  ],
})

// 2. 获取验证码图片
const captchaSrc = ref('') // 验证码图片 URL

function handleGetCaptcha() {
  getCaptchaImg().then(res => {
    captchaSrc.value = URL.createObjectURL(res)
  })
}

handleGetCaptcha()

// 3. 注册账号
function handleSignup() {
  // router().push({ path: '/signup' })
  ElMessage({
    type: 'success',
    message: 'This is a fake link.',
  })
}

// 4. 重置密码
function handleResetPassword() {
  // router().push({ path: '/reset-password' })
  ElMessage({
    type: 'success',
    message: 'This is a fake link.',
  })
}

// 5. 登录
const signinFormEle = ref(null) // 表单
const isSigningIn = ref(false) // 正在登录
const { redirect } = useRoute().query // 重定向

function handleSignin() {
  const form = signinFormEle.value as any
  form.validate().then(() => {
    isSigningIn.value = true
    const { username, password, captcha } = signinForm.value
    signin({
      account: username,
      pwd: password,
      imgcode: captcha,
    })
      .then(res => {
        const { token, user_info } = res
        token && store.commit('setToken', token)
        user_info && store.commit('setUserInfo', user_info)

        router.push({
          path: typeof redirect === 'string' ? redirect : '/',
          replace: true,
        })
      })
      .catch(() => {
        handleGetCaptcha()
      })
      .finally(() => {
        isSigningIn.value = false
      })
  })
}
// onMounted(() => {
//   getSigninInfo().then((res) => {
//     slideList.value = res.slide;
//   });
// });
</script>
<style lang="scss">
.signin {
  height: 100vh;
  background-color: var(--el-background-color-base);
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  &-img {
    width: 40vw;
  }
  &-form {
    width: 300px;
    // height: 400px;
    border-radius: 10px;
    background-color: #fff;
    box-shadow: var(--el-box-shadow-light);
    padding: 40px 40px 140px;
    background-image: url(@/assets/signin/cat.svg);
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: contain;
    h1 {
      margin-bottom: 40px;
    }
    h5 {
      color: var(--el-text-color-secondary);
      margin-bottom: 8px;
      display: flex;
      align-items: center;
      .el-link {
        font-size: 0.75rem;
      }
    }
    &-captcha {
      display: flex;
      img {
        height: 40px;
        margin-right: 10px;
        border-radius: var(--el-border-radius-base);
      }
    }
  }
}
</style>
